<!--
  用户管理->用户标签
-->
<template>
  <div class="userTag">
     <el-dropdown-item @click.native="handleTag">用户标签</el-dropdown-item>
      <el-dialog title="添加标签" width="1000px" v-dialogDrag :close-on-click-modal="false" :append-to-body='true' :visible.sync="tagVisible" @close="tagVisible = false">
         <div class="allocationUserDialog d-flex">
           <div class="leftDialog" style="flex:1">
               <el-tree :data="treeList" :props="defaultPropsTag" node-key="typeId" ref="treeTag"  highlight-current  default-expand-all @node-click="handleNodeTagClick"></el-tree>
           </div>
           <div class="rightDialog" style="flex:3">
               <div class="searchDialog d-flex" style="margin-bottom: 10px;">
                   <el-input v-model="searchForm.tagName" clearable placeholder="请输入标签名称" size="small" style="width:250px;margin-right: 10px;"></el-input>
                   <el-button type="primary" @click="handleSearch()" size="small">查询</el-button>
               </div>
               <div class="tableDialog">
                   <el-table :data="dataList" style="width: 100%;"  border height="500"
                     @select="handleSelect" ref="multipleTableAllocationUser" stripe size="small">
                     <el-table-column type="selection" width="55" ></el-table-column>
                      <el-table-column label="序号" type="index"  width="100" > </el-table-column>
                      <el-table-column prop="name" label="标签名称" >
                        <template #default="scope">
                          <el-tag  effect="plain" :style="{borderColor:scope.row.color,color: scope.row.color}">{{ scope.row.name }}</el-tag>
                        </template>
                      </el-table-column>
                   </el-table>
               </div>
           </div>
         </div>
         <div class="activeCheckedBox">
             <el-tag v-for="(tag,index) in tagStatusList" :key="tag.id" closable @close="handleClose(tag,index)" type="primary" style="margin-right:5px;background-color: #fff;">
               {{tag.name}}
             </el-tag>
         </div>
         <div slot="footer" class="dialog-footer">
           <el-button @click="tagVisible = false" size="small">取 消</el-button>
           <el-button type="primary" @click="submitUserTag()" size="small" :loading="userLoading">确 定</el-button>
         </div>
       </el-dialog>
  </div>


</template>

<script>
  import { getTagList,getTagCategory,addTagRelevancy } from '@/api/getData'
 export default {
   name: 'userTag',
   props: ['tagList','id'],
   data(){
     return{
       tagVisible:false,
       userLoading:false,
       defaultPropsTag:{
         children: 'children',
         label: 'name'
       },
       searchForm:{
         tagName:'',
         typeId:'2',
       },
       checkedCities:[],
       tagStatusList:[],
       dataList:[],
       treeList:[]
     }
   },

   mounted() {
     this.tagStatusList = this.tagList;
     //this.tagListFn();
   },
   methods:{
     handleSearch(){
        this.tagListFn();
     },
     handleClose(row,index){/*移除 分配用户 选中项*/
       this.tagStatusList.splice(index,1);
       this.$refs.multipleTableAllocationUser.toggleRowSelection(row, false); //不选中
     },
     handleNodeTagClick(row){
       this.searchForm.typeId = row.typeId;
       this.tagListFn();
     },
      handleTag(){
        this.tagVisible = true;
        this.TreeList();
      },
       async TreeList(){
          try {
            const result = await getTagCategory({typeId:2});
            if (result.code == 200) {
              this.treeList = result.data;
              this.$nextTick(() => {
                this.$refs.treeTag.setCurrentKey(2);
                 this.tagListFn();
              })
            } else {
              this.$message.error(result.msg);
            }
          } catch (err) {
            console.log(err)
          }
        },
       async tagListFn() {
        try {
          const result = await getTagList(this.searchForm);
          if (result.code == 200) {
            this.dataList = result.rows;
            this.$nextTick(() => {
              this.toggleSelection(this.tagStatusList)
            })

          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleSelect(val,row){
        let index = '';
        for(let i=0;i<this.tagStatusList.length;i++){
          if(this.tagStatusList[i].tagId == row.tagId){
            index = i;
          }
        }
        if(index || index=='0'){
          this.tagStatusList.splice(index,1)
        }else{
          this.tagStatusList.push(row);
        }
      },
      toggleSelection(rows) {
        if (rows) {
         rows.forEach(row => {
            this.$refs.multipleTableAllocationUser.toggleRowSelection(this.dataList.find(item=>{
              return row.tagId == item.tagId;
            }),true);
          });
        };
      },
      submitUserTag(){
        // if(!this.tagStatusList.length){
        //   this.$modal.msgWarning('请选中在点击保存');
        //   return;
        // }
        this.userLoading = true;
        let tagIds =[];
        for(let i=0;i<this.tagStatusList.length;i++){
          tagIds.push(this.tagStatusList[i].tagId)
        }
        let data = {
          customerId :this.id ,
          tagIds:tagIds.join(',')
        }
        addTagRelevancy(data).then((result) => {
          if (result.code == 200) {
            this.$message.success(result.msg);
            this.tagVisible = false;
            this.$emit('dataInfo', '');
          } else {
            this.$message.error(result.msg);
          }
          this.userLoading = false;
        });
    },
   }
 }
</script>

<style lang="scss" scoped>
    .tableDialog /deep/ .el-table__header-wrapper  .el-checkbox{//找到表头那一行，然后把里面的复选框隐藏掉
        display:none
      }
</style>
